<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
    <link rel="stylesheet" href="../../model/element.css">
    <link rel="stylesheet" href="../../model/jsFn.css">
</head>
<body>
<div class="catalog">
    <h1>目录</h1>
    <ul>
        <li>
            <p><a href="#profile">localStorage</a></p>
            <ul>
                <li><p><a href="#jsFn_get">get() ----------获得键值对</a></p></li>
                <li><p><a href="#jsFn_set">set() ----------设置键值对</a></p></li>
                <li><p><a href="#jsFn_remove">remove() ----------移除键值对</a></p></li>
                <li><p><a href="#jsFn_getItem">getItem ----------获得指定的键值对</a></p></li>
                <li><p><a href="#jsFn_setItem">getItem ----------得到指定的键值对</a></p></li>
                <li><p><a href="#jsFn_removeItem">removeItem ----------移除指定的键值对</a></p></li>
                <li><p><a href="#jsFn_clear">clear ----------清空所有的键值对</a></p></li>
            </ul>
        </li>
    </ul>
</div>
<div id="profile">
    <h2>对象简介:</h2>
    <p>localStorage,本地轻量级的键值对数据存储</p>
</div>
<!--对象的某一个方法-->
<div class="jsFnModel" id="jsFn_get">
    <h3>get:</h3>
    <div class="shape">
        <h3>函数使用样式</h3>
        <p>localStorage.get(keys,[defaultValue]) ->string|array;</p>
    </div>
    <div class="profile">
        <h3>函数功能简介</h3>
        <p>根据key值获得value</p>
    </div>
    <div class="version">
        <p>稳定性;2 - 稳定的</p>
        <p>新增于:v0.0.0</p>
    </div>
    <div class="params">
        <h3>参数列表:</h3>
        <ul>
            <li>
                <p>keys</p>
                <p>&nbsp;string|array&nbsp;</p>
                <p>根据参数为string还是array返回对应的value值或对应的value 数组</p>
            </li>
            <li>
                <p>defaultValue</p>
                <p>&nbsp;string&nbsp;</p>
                <p>若没有此key值,默认返回值;若keys参数为array,值对应key不存在返回默认值,其余正常返回</p>
            </li>
        </ul>
    </div>
    <div class="res">
        <h3>返回值:</h3>
        <p>string|array</p>
        <p>string:返回医德key所对应的value值,array返回keys数组对应的values数组</p>
    </div>
    <div class="code">
        <h3>例子</h3>
        <pre>
            <code>
                let values1 = localStorage.get([name,img]);
                //values1:{name:'张三',img:'http://头像.jpg'}
                let values2 = localStorage.get([name,img],"");
                let name = localStorage.get(name,"未登录");
                //name:"张三";
                let img = localStorage.get(img,"default.jpg");
            </code>
        </pre>
    </div>
    <div class="error">
        <h3>抛出错误</h3>
    </div>
</div>
<div class="jsFnModel" id="jsFn_set">
    <h3>set:</h3>
    <div class="shape">
        <h3>函数使用样式</h3>
        <p>localStorage.set(object)->null;localStorage.set(key,value) ->null</p>
    </div>
    <div class="profile">
        <h3>函数功能简介</h3>
        <p>向本地数据库里面存数据</p>
    </div>
    <div class="version">
        <p>稳定性;2 - 稳定的</p>
        <p>新增于:v0.0.0</p>
    </div>
    <div class="params">
        <h3>参数列表:</h3>
        <ul>
            <li>
                <p>object</p>
                <p>&nbsp;object&nbsp;</p>
                <p>根据对象里的键值对存储数据</p>
            </li>
            <li>
                <p>key</p>
                <p>&nbsp;string&nbsp;</p>
                <p>本地数据库的新增的key键</p>
            </li>
            <li>
                <p>value</p>
                <p>&nbsp;string&nbsp;</p>
                <p>本地数据库对应键的value值</p>
            </li>
        </ul>
    </div>
    <div class="res">
        <h3>返回值:</h3>
        <p>无</p>
    </div>
    <div class="code">
        <h3>例子</h3>
        <pre>
            <code>
                //方式1
                localStorage.set({name:"张三",img:"http://头像.jpg"});
                //方式2
                localStorage.set("name","张三");
                localStorage.set("img","http://头像.jpg");
            </code>
        </pre>
    </div>
    <div class="error">
        <h3>抛出错误</h3>
    </div>
</div>
<div class="jsFnModel" id="jsFn_remove">
    <h3>remove:</h3>
    <div class="shape">
        <h3>函数使用样式</h3>
        <p>localStorage.remove(keys)->null</p>
    </div>
    <div class="profile">
        <h3>函数功能简介</h3>
        <p>从本地数据库里移除一个key值</p>
    </div>
    <div class="version">
        <p>稳定性;2 - 稳定的</p>
        <p>新增于:v0.0.1</p>
    </div>
    <div class="params">
        <h3>参数列表:</h3>
        <ul>
            <li>
                <p>keys</p>
                <p>&nbsp;string|array&nbsp;</p>
                <p>移除指定的key值,若为数组,则遍历所有的key值并移除对应的key值</p>
            </li>
        </ul>
    </div>
    <div class="res">
        <h3>返回值:</h3>
        <p>无</p>
    </div>
    <div class="code">
        <h3>例子</h3>
        <pre>
            <code>
                //方式1
                localStorage.remove("name");
                localStorage.remove("img");
                //方式2
                localStorage.remove(["name","img"]);
            </code>
        </pre>
    </div>
    <div class="error">
        <h3>抛出错误</h3>
    </div>
</div>
<div class="jsFnModel" id="jsFn_getItem">
    <h3>getItem</h3>
    <div class="shape">
        <h3>函数使用样式</h3>
        <p>localStorage.getItem(key) ->string</p>
    </div>
    <div class="profile">
        <h3>函数功能简介</h3>
        <p>过得指定key值的value值</p>
    </div>
    <div class="version">
        <p>稳定性;2 - 稳定的</p>
        <p>新增于:v0.0.1</p>
    </div>
    <div class="params">
        <h3>参数列表:</h3>
        <ul>
            <li>
                <p>key</p>
                <p>&nbsp;string&nbsp;</p>
                <p>指定一个key值</p>
            </li>
        </ul>
    </div>
    <div class="res">
        <h3>返回值:</h3>
        <p>string</p>
        <p>指定key的value值</p>
    </div>
    <div class="code">
        <h3>例子</h3>
        <pre>
            <code>
                let name = localStorage.getItem("name");
                console.log(name);
            </code>
        </pre>
    </div>
    <div class="error">
        <h3>抛出错误</h3>
    </div>
</div>
<div class="jsFnModel" id="jsFn_setItem">
    <h3>setItem:</h3>
    <div class="shape">
        <h3>函数使用样式</h3>
        <p>localStorage.setItem(key,value) -> null</p>
    </div>
    <div class="profile">
        <h3>函数功能简介</h3>
        <p>设置键值对</p>
    </div>
    <div class="version">
        <p>稳定性;2 - 稳定的</p>
        <p>新增于:v0.0.1</p>
    </div>
    <div class="params">
        <h3>参数列表:</h3>
        <ul>
            <li>
                <p>key</p>
                <p>&nbsp;string&nbsp;</p>
                <p>key值</p>
            </li>
            <li>
                <p>value</p>
                <p>&nbsp;string&nbsp;</p>
                <p>value值</p>
            </li>
        </ul>
    </div>
    <div class="res">
        <h3>返回值:</h3>
        <p>无</p>
    </div>
    <div class="code">
        <h3>例子</h3>
        <pre>
            <code>
                localStorage.setItem("name","张三");
            </code>
        </pre>
    </div>
    <div class="error">
        <h3>抛出错误</h3>
    </div>
</div>
<div class="jsFnModel" id="jsFn_removeItem">
    <h3>removeItem:</h3>
    <div class="shape">
        <h3>函数使用样式</h3>
        <p>localStorage.removeItem(key) ->null</p>
    </div>
    <div class="profile">
        <h3>函数功能简介</h3>
        <p>删除指定的key值</p>
    </div>
    <div class="version">
        <p>稳定性;2 - 稳定的</p>
        <p>新增于:v0.0.1</p>
    </div>
    <div class="params">
        <h3>参数列表:</h3>
        <ul>
            <li>
                <p>key</p>
                <p>&nbsp;string&nbsp;</p>
                <p>本地数据库里的kay值</p>
            </li>
        </ul>
    </div>
    <div class="res">
        <h3>返回值:</h3>
        <p>无</p>
    </div>
    <div class="code">
        <h3>例子</h3>
        <pre>
            <code>
                localStorage.removeItem("name");
            </code>
        </pre>
    </div>
    <div class="error">
        <h3>抛出错误</h3>
    </div>
</div>
<div class="jsFnModel" id="jsFn_clear">
    <h3>clear:</h3>
    <div class="shape">
        <h3>函数使用样式</h3>
        <p>localStorage.clear()</p>
    </div>
    <div class="profile">
        <h3>函数功能简介</h3>
        <p>清空所有的键值对集合</p>
    </div>
    <div class="version">
        <p>稳定性;2 - 稳定的</p>
        <p>新增于:v0.0.0</p>
    </div>
    <div class="params">
        <h3>参数列表:</h3>
        <p>无</p>
    </div>
    <div class="res">
        <h3>返回值:</h3>
        <p>无</p>
    </div>
    <div class="code">
        <h3>例子</h3>
        <pre>
            <code>
                let name = localStorage.get("张三","未登录");
                console.log(name);
                //name -> "张三";
                localStorage.clear();
                name = localStorage.get("name","未登录");
                //name -> "未登录";
            </code>
        </pre>
    </div>
    <div class="error">
        <h3>抛出错误</h3>
    </div>
</div>
<div class="author">
    <p>by-草草</p>
</div>
</body>
</html>